;(function (node) {
  var _self = this,
    config = this.getConfig()
  var TodoList = function () {
    this.node = node
    for (var key in this.dConfig) {
      if (!this.config.hasOwnProperty(key)) {
        console.log(errorInfo(key))
        return
      }
    }
    this.setConfig()

    addEvent(this.plusBtn, 'click', function () {
      _self.showInput.call(_self)
    })

    addEvent(this.addBtn, 'click', function () {
      _self.addBtnClick.call(_self)
    })

    addEvent(this.oList, 'click', function (e) {
      var e = e || window.event,
        tar = e.target || e.scrElement

      _self.listClick.call(_self, tar)
    })
  }
  // 原型：一般封装方法
  TodoList.prototype = {
    // 获取属性配置
    getConfig: function () {
      return JSON.parse(this.node.getAttribute('data-config'))
    },
    // 增加项目按钮点击事件
    addBtnClick: function () {
      var _self = this,
        content = this.content.value,
        contentLen = content.length,
        oItems = this.oList.getElementsByClassName('items'),
        itemLen = oItems.length,
        text
      if (contentLen < 0) return
      if (itemLen > 0) {
        for (var i = 0; i < itemLen; i++) {
          text = elemChildren(oItems[i])[0].innerText
          if (text === content) {
            alert('已存在该项')
            return
          }
        }
      }
      if (this.isEdit) {
        elemChildren(oItems[this.curIndex])[0].innerText = content
        setInputStatus.apply(_self, [oItems, null, 'add'])
      } else {
        var oLi = document.createElement('li')
        oLi.className = this.itemClass
        oLi.innerHTML = itemTpl(content)
        this.oList.appendChild(oLi)
        // call: 改变this指向
        setInputShow.call(_self, 'close')
      }
    },
    listClick: function (tar) {
      var _self = this,
        className = tar.className,
        oParent = elemParent(tar, 2),
        oItems = this.oList.getElementsByClassName('item'),
        itemLen = oItems.length,
        item

      if (className === 'edit-btn fa fa-edit') {
        // 找到点击的哪一项
        for (var i = 0; i < itemLen; i++) {
          // 重置 item 样式
          item = oItems[i]
          item.className = 'item'
        }
        oParent.className += ' active'
        this.setInputShow.call(_self, 'open')
        this.setInputStatus.apply(_self, [oItems, oParent, 'edit'])
      } else if (className === 'remove-btn fa fa-times') {
        oParent.remove()
      }
    },
  }
  // 设置输入框显示隐藏
  function setInputShow(action) {
    var oItems = this.oList.getElementsByClassName('item')
    if (action === 'open') {
      this.inputArea.style.display = 'block'
      this.inputShow = true
    } else if (action === 'close') {
      this.inputArea.style.display = 'none'
      this.inputShow = false
      this.content.value = ''
      setInputStatus.apply(this, [oItems, null, 'add'])
    }
  }
  // 改变输入框的状态
  function setInputStatus(oItems, target, status) {
    if (status === 'edit') {
      var idx = Array.prototype.indexOf.call(oItems, target),
        text = elemChildren(target)[0].innerText

      this.addBtn.innerText = '编辑第' + (idx + 1) + '项'
      this.isEdit = true
      this.curIndex = idx
      this.content.value = text
    } else if (status === 'add') {
      var itemLen = oItems.length,
        item
      for (var i = 0; i < itemLen; i++) {
        item = oItems[i]

        item.className = 'item'
        this.addBtn.innerText = '增加项目'
        this.isEdit = false
        this.curIndex = null
      }
    }
  }
  function errorInfo(key) {
    return new Error(
      '您没有配置参数' +
        key +
        '\n' +
        '必须配置的参数列表如下' +
        key +
        '\n' +
        '打开输入框按钮元素类名: plusBtn\n' +
        '输入框区域元素类名: inputArea\n' +
        '增加项目按钮元素类名: addBtn\n' +
        '列表承载元素类名: list\n' +
        '列表项承载元素类名: itemClass'
    )
  }
  new TodoList()
})(document.getElementsByClassName('todo-wrap')[0])
